<template>
  <!-- 订单页面 -->
  <div class="order">
    <van-tabs v-model="active" @change="changTab">
      <van-tab title="全部" to="/order/all" :replace="true"></van-tab>
      <van-tab title="已完成" to="/order/completed" :replace="true"></van-tab>
      <van-tab title="待付款" to="/order/obligation" :replace="true"></van-tab>
      <van-tab title="已付款" to="/order/pending" :replace="true"></van-tab>
      <van-tab title="退款" to="/order/refund" :replace="true"></van-tab>
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  methods: {
    changTab(e, a) {
    }
  },
  created() {
    const active = this.$route.params.active;
    const path = this.$route.name;
    if (4 > active >= 0 && active != undefined) {
      switch (active) {
        case 0:
          this.active = active;
          console.log(active);
          this.$router.replace({ name: "order_All" });
          break;
        case 1:
          this.active = active;
          this.$router.replace({ name: "order_Completed" });
          break;
        case 2:
          this.active = active;
          this.$router.replace({ name: "order_Obligation" });
          break;
        case 3:
          this.active = active;
          this.$router.replace({ name: "order_Pending" });
          break;
        case 4:
          this.active = active;
          this.$router.replace({ name: "order_Refund" });
          break;
      }
    } else {
      switch (path) {
        case "order_All":
          this.active = 0;
          break;
        case "order_Completed":
          this.active = 1;
          break;
        case "order_Obligation":
          this.active = 2;
          break;
        case "order_Pending":
          this.active = 3;
          break;
        case "order_Refund":
          this.active = 4;
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.order {
  width: 100%;
  background-color: #f7f7f7;
}
.van-tab {
  flex-basis: 20% !important;
}
</style>